<template>
	<view>
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box" v-if="info!=null">
			<view :style="{height:statusHeight+'px'}"></view>
			<!--<view class="item" style="align-items: center;position: relative;" >
				&lt;!&ndash; <button class="select_icon" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">选择头像</button> &ndash;&gt;
				<text class="left">头像</text>
				<view class="right" @click="onChooseAvatar()">
					<view class="icon" style="margin-right: 0;" v-if="info.info.avatar==null">
						<image src="https://www.cccshansong.com/chong_weapp/drawer_icon2.png" mode="aspectFill"></image>
					</view>
					<view class="icon" style="margin-right: 0;" v-if="info.info.avatar!=null">
						<image :src="info.info.avatar" mode="aspectFill"></image>
					</view>
					<image
						src="https://www.cccshansong.com/chong_weapp/drawer_icon3.png"
						mode="aspectFill"></image>
				</view>
			</view>-->
			<!--<view class="item">
				<text class="left">姓名</text>
				<view class="right">
					<text class="title">{{info.info.name}}</text>
				</view>
			</view>-->
			<!--<view class="item" @click="goEditPhone()">
				<text class="left">手机号</text>
				<view class="right">
					<text class="title" style="margin-right: 0;">{{info.info.mobile}}</text>
					<image
						src="https://www.cccshansong.com/chong_weapp/drawer_icon3.png"
						mode="aspectFill"></image>
				</view>
			</view>-->
			<view class="itemBox">
				<view class="item" style="align-items: center;position: relative;" @click="handleUpload()">
					<text class="left">收款码</text>
					<view class="right">
						<view class="right_icon" style="margin-right: 0;" v-if="info.info.shoukuan==''">
							<text>请上传收款码</text>
						</view>
						<view class="icon" style="margin-right: 0;" v-if="info.info.shoukuan!=''">
							<image :src="info.info.shoukuan" mode="aspectFill" style="border-radius: 0;"></image>
						</view>
						<image
							src="https://www.cccshansong.com/chong_weapp/drawer_icon3.png"
							mode="aspectFill"></image>
					</view>
				</view>
				<!--<view class="item">
					<text class="left">身份</text>
					<view class="right">
						<text class="title">骑手</text>
					</view>
				</view>-->
				<view class="item" @click="goIdCard()">
					<text class="left">实名认证</text>
					<view class="right">
						<text class="title" style="margin-right: 0;" v-if="info.info.id_card==null">未认证</text>
						<text class="title" style="margin-right: 0;" v-if="info.info.id_card!=null&&info.info.certification==0">待审核</text>
						<text class="title" style="margin-right: 0;" v-if="info.info.id_card!=null&&info.info.certification==1">已认证</text>
						<text class="title" style="margin-right: 0;" v-if="info.info.id_card!=null&&info.info.certification==2">已驳回</text>
						<image
							src="https://www.cccshansong.com/chong_weapp/drawer_icon3.png"
							mode="aspectFill"></image>
					</view>
				</view>
				<view class="item">
					<text class="left">银行卡号</text>
					<view class="right">
						<text class="title">{{info.info.bank_code==null?'--':info.info.bank_code}}</text>
					</view>
				</view>
				<!--<view class="login_out" hover-class="hover_class" @click="handleOut()">
					退出登录
				</view>-->
			</view>
		</view>
		<yk-authpup ref="authpup" type="top" :isNativeHead='false'  @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<yk-authpup ref="authpupAlbum" type="top" :isNativeHead='true' @changeAuth="changeAuthAlbum" :permissionID="permissionID"></yk-authpup>
		<yk-authpup ref="authpup1" type="top" :isNativeHead='false'  @changeAuth="changeAuth1" :permissionID="permissionID"></yk-authpup>
		<yk-authpup ref="authpupAlbum1" type="top" :isNativeHead='true' @changeAuth="changeAuthAlbum1" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	export default {
		components: {
			navigationCustom,
			ykAuthpup
		},
		data() {
			return {
				permissionID:'',
				shoukuan_img:'',
				avatar:'',
				action_url:'',
				info:null,
				statusHeight: 0,
				config: {
					title: "收款信息", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		onLoad() {
			var a = this
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 30
			a.action_url = a.globalurl + 'common/image_upload'
			a.getUserInfo()
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.opacity = 1
				a.config.bgcolor = 'rgba(255,255,255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(255,255,255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(255,255,255,1)'
			}
			if (res.scrollTop < 50) {
				a.opacity = 0
			}
			if (res.scrollTop == 0) {
				a.opacity = 0
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
		},
		methods:{
			handleUpload(){
				var that = this
				that.openAuth1('CAMERA')
			},
			//打开自定义权限目的弹框
			openAuth1(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup1'].open();
				},500)
			},
			openAuthAlbum1(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpupAlbum1'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth1(){
				//这里是权限通过后执行自己的代码逻辑
				console.log('相机权限已授权，可执行自己的代码逻辑了');
				this.openAuthAlbum1('WRITE_EXTERNAL_STORAGE')
			},
			changeAuthAlbum1(){
				//这里是权限通过后执行自己的代码逻辑
				console.log('相册权限已授权，可执行自己的代码逻辑了');
				this.handleUploadAuth()
			},
			handleUploadAuth(){
				var that = this
				var token = uni.getStorageSync('token');
				uni.chooseImage({
				    count: 1, // 默认选择一张图片
				    success: function (chooseResult) {
				            const tempFilePaths = chooseResult.tempFilePaths;
				            // 上传文件
				            uni.uploadFile({
				                url: that.action_url, //图片上传的接口//修改
				                filePath: tempFilePaths[0],
				                name: 'file', //修改
				                fileType: 'image',
								header: {
								  'Accept': 'application/json',
								  'content-type': 'application/json',
								  'Authorization':'Bearer ' + token
								},
				                success: (uploadFileRes) => {
									var temp_img = JSON.parse(uploadFileRes.data)
									that.shoukuan_img = temp_img.data.complete_url
									that.updataShoukuan()
				                },
				                fail: (error) => {
				                    console.error('上传失败:', error);
				                }
				            });
				        },
				        fail: (error) => {
				            console.error('选择图片失败:', error);
				    }
				 });
			},
			updataShoukuan(){
				var a = this
				a.globalajax('user/modify', {
					shoukuan: a.shoukuan_img,
					lat: uni.getStorageSync('latitude'),
					lng: uni.getStorageSync('longitude'),
				}, 'POST', function(res) {
					console.log(res);
					uni.hideLoading()
					if (res.data.code == 200) {
						uni.showToast({
							title:'操作成功',
							icon:'none'
						})
						setTimeout(()=>{
							a.getUserInfo()
						},300)
					} else {
						a.$showModal({
							title:'友情提示',
							content:res.data.msg,
							showCancel:false,
							confirmText:'我知道了',
							success: (res) => {
							}
						});
					}
				});
			},
			// 更换头像
			onChooseAvatar() {
				var that = this
				that.openAuth('CAMERA')
			},
			//打开自定义权限目的弹框
			openAuth(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup'].open();
				},500)
			},
			openAuthAlbum(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpupAlbum'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth(){
				//这里是权限通过后执行自己的代码逻辑
				console.log('相机权限已授权，可执行自己的代码逻辑了');
				this.openAuthAlbum('WRITE_EXTERNAL_STORAGE')
			},
			changeAuthAlbum(){
				//这里是权限通过后执行自己的代码逻辑
				console.log('相册权限已授权，可执行自己的代码逻辑了');
				this.onChooseAvatarAuth()
			},
			onChooseAvatarAuth(){
				var that = this
				var token = uni.getStorageSync('token');
				uni.chooseImage({
				    count: 1, // 默认9，设置图片的数量
				    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', 'camera'],
				    success: (chooseResult) => {
				    	const temp_path = chooseResult.tempFilePaths[0];
						uni.showLoading({
							title: '正在上传'
						});
						//上传图片
						uni.uploadFile({
							url: that.action_url, //图片上传的接口//修改
							//文件路径
							filePath: temp_path,
							name: 'file', //修改
							fileType: 'image',
							header: {
							  'Accept': 'application/json',
							  'content-type': 'application/json',
							  'Authorization':'Bearer ' + token
							},
							success: uploadFileRes => {
								uni.hideLoading();
								var temp_img = JSON.parse(uploadFileRes.data)
								that.avatar = temp_img.data.complete_url //选择后台返回的路径,修改路径
								// //更改头像
								that.updatainfo()
							},
							fail: (err) => {
								console.log(err);
								uni.hideLoading();
							},
							complete: () => {
								uni.hideLoading();
							}
						})
				    },
				    fail: (err) => {
				        // 处理选择图片失败的结果
				        console.error('选择图片失败', err);
				    },
				});
			},
			updatainfo(){
				var a = this
				a.globalajax('user/modify', {
					avatar: a.avatar,
					lat: uni.getStorageSync('latitude'),
					lng: uni.getStorageSync('longitude'),
				}, 'POST', function(res) {
					console.log(res);
					uni.hideLoading()
					if (res.data.code == 200) {
						uni.showToast({
							title:'操作成功',
							icon:'none'
						})
						setTimeout(()=>{
							a.getUserInfo()
						},300)
					} else {
						a.$showModal({
							title:'友情提示',
							content:res.data.msg,
							showCancel:false,
							confirmText:'我知道了',
							success: (res) => {
							}
						});
					}
				});
			},
			goEditPhone(){
				uni.navigateTo({
					url:'/pages/user/bindPhone'
				})
			},
			goIdCard(){
				var a = this
				if(a.info.info.id_card==null){
					uni.navigateTo({
						url:'/pages/user/auth1'
					})
				}else{
					uni.navigateTo({
						url:'/pages/user/idCardDetail'
					})
				}
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			getUserInfo(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('user/info',{
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							a.info = res.data.data
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			handleOut(){
				var a = this
				a.$showModal({
					title:'提示',
					content:'确定要退出登录吗？',
					showCancel:true,
					confirmText:'确定',
					success: (res) => {
						if(res.confirm){
							a.globalajax('user/modify', {
								push_id: '',
								lat: uni.getStorageSync('latitude'),
								lng: uni.getStorageSync('longitude'),
							}, 'POST', function(res) {
								console.log(res);
								uni.hideLoading()
								if (res.data.code == 200) {
									console.log('请求成功')
									uni.clearStorageSync();
									setTimeout(()=>{
										uni.showLoading({
										  title:'正在退出登录',
										})
									},200)
									setTimeout(()=>{
										uni.hideLoading()
										uni.reLaunch({
											url:'/pages/user/login'
										})
									},400)
								} else {
									a.$showModal({
										title:'友情提示',
										content:res.data.msg,
										showCancel:false,
										confirmText:'我知道了',
										success: (res) => {
										}
									});
								}
							});

						}
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
		}
		.top_nav_box {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}
		.page_item_bj {
			width: 750rpx;
			height: 664rpx;
			background-image: url('../../static/images/png03.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
		.page_content_box {
			width: 750rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			box-sizing: border-box;
			padding: 0 30rpx;
		}
		.itemBox{
			margin-top: 50rpx;
			background: rgba(255,255,255,0.5);
			padding: 32rpx 0;
			border-radius: 24rpx;
		}
	.login_out {
		margin: 0 auto;
		width: 690rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: rgba(96, 98, 102, 1);
		border-radius:200rpx;
		background: rgba(228, 231, 237, 1);
		margin-top: 270rpx;
		font-size: 30rpx;
	}

	.item {
		display: flex;
		// padding: 26rpx 16rpx 26rpx 24rpx;
		padding: 26rpx 0rpx 26rpx 0rpx;
		justify-content: space-between;
		border-bottom: 2rpx solid rgba(48, 49, 51, 0.05);
		.select_icon {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 9999;
		}
		.left {
			color: rgba(48, 49, 51, 1);
			padding-left: 44rpx;
			font-size: 30rpx;
		}

		.right {
			display: flex;
			align-items: center;
			padding-right: 26rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
			.right_icon{
				font-size: 30rpx;
				color: #303133;
			}
			.icon {
				width: 88rpx;
				height: 88rpx;
				flex-shrink: 0;
				margin-right: 20rpx;

				image {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}
			}

			.title {
				margin-right: 20rpx;
				font-size: 30rpx;
				color: rgba(48, 49, 51, 1);
			}

			.max_right {
				max-width: 500rpx;
				text-align: end;
				white-space: nowrap;
 				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}

			.address {
				text-align: end;
				margin-right: 20rpx;
				width: 486rpx;
				/* //溢出隐藏省略号 */
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* //-webkit-line-clamp:1; 超出几行 */
			}

			.button {
				width: 32rpx;
				height: 32rpx;
			}
		}

	}
</style>
